
// type InjectionKey, 
import { reactive, readonly } from 'vue'

import {
  defineStore,
  useStoreLocal 
} from '../../lib/main'


export type User = {
  name: string
  isLogin: boolean
  power: {
    modules: Array<number | string>
  }
}

export type UserState = {
  user: User
}

// 区分局部状态的标记
const flag = Symbol('User') // as InjectionKey<string>

/**
 * 注册局部的当前登录用户的状态
 * @returns 用户状态和操作方式
 */
export const regUserState = () => {
  // 定义内部成员
  // 内部使用的用户状态
  const user = reactive<User>({
    name: '没有登录',
    isLogin: false,
    power: {
      modules: []
    }
  })

  // 登录用的函数，仅示意，不涉及细节
  const login = () => {
    // 模拟登录
    user.name = '张三'
    user.isLogin = true
    user.power.modules.length = 0
    user.power.modules = [...[1,2,3]]
  }

  // 模拟退出，仅示意
  const logout = () => {
    // 模拟退出
    user.name = '已经退出'
    user.isLogin = false
    user.power.modules.length = 0
  }
  
  // 定义用户的状态
  const state1 = defineStore<UserState>(flag,
    () => {
      // 返回一个只读状态 
      return {
        user: readonly(user)
      }
    }
  )

  const state = defineStore<UserState>(flag, {
    user: readonly(user)
  })
    
  // 返回 数据和状态
  return {
    login,
    logout,
    state
  }
}

/**
 * 子组件用获取状态
 * @returns 当前登录的用户状态的只读副本
 */
export const getUserState = (): UserState => {
  return useStoreLocal<UserState>(flag)
}
 
